<template>
  <el-container class="content">

    <el-aside style="width: 240px;">
      <el-menu style="min-height: 600px" :default-active="activeIndex" @select="handleSelect">
        <el-menu-item index="1">
          <i class="el-icon-menu"></i>
          <span slot="title">基本信息</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-document"></i>
          <span slot="title">基本设置</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-document"></i>
          <span slot="title">短信配置</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-document"></i>
          <span slot="title">微信公众号</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-document"></i>
          <span slot="title">阿里云储存配置</span>
        </el-menu-item>
        <el-menu-item index="6">
          <i class="el-icon-document"></i>
          <span slot="title">高德地图配置</span>
        </el-menu-item>
        <el-menu-item index="7">
          <i class="el-icon-document"></i>
          <span slot="title">阿里ocr</span>
        </el-menu-item>
      </el-menu>
    </el-aside>
    <el-main>
      <component :is="page"></component>
    </el-main>
  </el-container>
  <!-- Default box -->
</template>

<script>
import index from "./index.vue"
import setting from "./setting.vue"
import vip from "./vip.vue"
import face from "./face.vue"
import code from "./code.vue"
import weApp from "./weApp.vue";
import oss from "./oss.vue";
import amap from "./amap.vue";
import ocr from "./ocr.vue";

export default {
  name: "system_layout",
  components: {
    setting, index,vip,face,code,weApp,oss,amap,ocr
  },
  data() {
    return {
      activeIndex: "1",
      page: "index"
    };
  },
  methods: {
    handleSelect(event) {
      this.selectIndex = event;
      if (event === "1") {
        this.page = "index";
      } else if (event === "2") {
        this.page = "setting";
      } else if (event === "3") {
        this.page = "code";
      }else if (event === "4") {
        this.page = "weApp";
      } else if (event === "5") {
        this.page = "oss";
      } else if (event === "6") {
        this.page = "amap";
      } else if (event === "7") {
        this.page = "ocr";
      } else {
        console.info("hi");
      }
    },
  },
  mounted() {
    var activeIndex = this.$route.query.activeIndex;
    if (activeIndex) {
      this.activeIndex = activeIndex;
    }
  },
};
</script>

<style scoped>
.content {
  background-color: #fff;
}
</style>
